<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 2.内部样式表 style标签 -->
     <!-- 外部样式表 用link -->
     <link rel="stylesheet" href="./outer.css">
     <style>
        /*标签选择器 标签名{}*/
        div{
            color: orange;
        }
        /*id 选择器 #id{}*/
         #three{
            color: rgb(89, 0, 255);
            font-size: 18px;
         }
         .four{
            color: chartreuse;
            /*设置斜体*/
            font-style: italic;
            /*设置字体加粗*/
            font-weight: bolder;
         }
         /*并集选择器 组合选择器 */
         #three,p,span{
          background-color: red;
         }
         /*后代选择器 空格隔开*/
         section div{
            color: cyan;
            font-size: 22px;
         }
     </style>
</head>
<body>
    <!-- 1.内联样式/行内样式 直接在标签内部设置样式 -->
    <div style="font-size: 18px;color: blue;">块级元素1</div>
    <div>块级元素2</div>
    <div id="three">块级元素3</div>
    <div class="four">块级元素4</div>
    <div class="four five">块级元素5</div>
    <p>段落标签</p>
    <span>行内元素</span>
    <!-- 块级元素 section div -->
    <section>
      <div>块级元素1</div>
      <div>块级元素2</div>
      <div>块级元素3</div>
      <div>块级元素4</div>
    </section>
</body>
</html>